<template>
  <list-page>
    <pub-search
      v-model:searchColumns="searchColumns"
      v-model:search-form="searchForm"
      mask-append-to="table-content"
      @search="search"
    >
      <template #leftBtn>
        <el-button
          v-hasPermissions="['basic:system:roles:add']"
          type="primary"
          @click="add"
          :icon="Plus"
        >
          新增
        </el-button>
      </template>
    </pub-search>
    <pub-table
      ref="pubTable"
      :column="columns"
      :data="tableData"
      :loading="tableLoading"
    >
      <template v-slot:switch="scope">
        <el-switch
          :before-change="beforeChangeColumn"
          v-model="scope.row.status"
          active-color="#13ce66"
          inactive-color="#ff4949"
          :active-value="1"
          :inactive-value="0"
          @change="changeStatus(scope.row)"
        />
      </template>
      <template v-slot:option="scope">
        <el-button
          v-if="scope.row.isSystem != 1"
          v-hasPermissions="['basic:system:roles:edit']"
          plain
          type="primary"
          @click="edit(scope.row)"
        >
          编辑
        </el-button>
      </template>
    </pub-table>
    <!-- 添加/编辑弹窗 -->
    <pub-dialog
      v-if="dialogFormVisible_add"
      :title="popTitle"
      :hasExtraBtn="true"
      v-model:visible="dialogFormVisible_add"
      width="800px"
    >
      <!-- ref="dialogEdit" -->
      <dialogEdit
        @close="close"
        @submitForm="submitForm"
        :editData="editData"
        :isEdit="isEdit"
      ></dialogEdit>
    </pub-dialog>

    <pub-pagination
      :total="pagination.total"
      v-model:page="pagination.page"
      v-model:limit="pagination.pageSize"
      @pagination="pagination.change"
    ></pub-pagination>
  </list-page>
</template>
<script>
export default {
  name: 'roles'
}
</script>
<script setup>
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { add_roles2, edit_roles2, get_roles_list2 } from '@/api/system'
import { useTable } from '@/hooks/UseTable'
import dialogEdit from './components/add.vue'

const editData = ref({})
const popTitle = ref('')
const isEdit = ref(false)
const editId = ref('')
const dialogFormVisible_add = ref(false)
let { tableData, search, getList, pagination, searchForm, tableLoading } =
  useTable(get_roles_list2)
const columns = ref([
  { label: '角色名称', prop: 'name' },
  {
    label: '机构类型',
    prop: 'orgType',
    type: 'formatDict',
    formatCode: 'JGLX-1'
  },
  {
    label: '所属区域',
    prop: 'level',
    type: 'formatDict',
    formatCode: 'SSQY'
  },
  { label: '绑定自定义角色', prop: 'roleNames' },
  { label: '操作', type: 'option', width: '100' }
])
const searchColumns = ref([
  {
    label: '角色名称',
    el: 'Input',
    bind: 'name',
    defaultValue: '',
    labelWidth: 80
  },
  {
    label: '机构类型',
    el: 'OrgTypeList',
    bind: 'orgType',
    type: 'Number',
    labelWidth: 80
  },
  {
    label: '所属区域',
    el: 'DictSelect',
    bind: 'level',
    defaultValue: '',
    code: 'SSQY',
    labelWidth: 80
  }
])

const add = row => {
  popTitle.value = '新增角色'
  dialogFormVisible_add.value = true
  isEdit.value = false
}

const edit = row => {
  console.log(row)
  popTitle.value = '编辑角色'
  editData.value = JSON.parse(JSON.stringify(row))
  dialogFormVisible_add.value = true
  isEdit.value = true
}

const close = () => {
  editId.value = ''
  dialogFormVisible_add.value = false
}

const submitForm = async val => {
  try {
    if (isEdit.value) {
      // 修改角色
      const res = await edit_roles2(val)
      if (res.succeed) {
        ElMessage({
          type: 'success',
          message: res.msg
        })
      }
    } else {
      // 新增角色
      const res = await add_roles2(val)
      if (res.succeed) {
        ElMessage({
          type: 'success',
          message: res.msg
        })
      }
    }
    isEdit.value = false
    close()
    await search()
  } catch (error) {
    console.log('error', error)
  }
  // this.$refs.dialogEdit.loadClose()
}

onMounted(() => {
  getList()
})
</script>
<style lang="scss" scoped>
.table-container {
  height: calc(100% - 90px);
}
.container {
  width: 100%;
  height: 100vh;
  padding: 10px;
}
</style>
